<template>
  <div class="app">
    <v-touch
      v-on:swipe="goRegister"
      v-on:panend="goRegister"
      v-on:tap="goRegister"
    >
      <vueSignature
        ref="signature"
        :sigOption="option"
        :w="'100vw'"
        :h="'100vh'"
        :disabled="disabled"
        :defaultUrl="dataUrl"
        class="signature"
      ></vueSignature>
    </v-touch>

    <div class="signature-btns">
      <van-button class="signature-btns-item clear-item" @click="clear"
        >清 空</van-button
      >
      <van-button
        class="signature-btns-item"
        :disabled="isHandIn"
        @click="submit"
        color="#FFB72F"
        >提交进件</van-button
      >
    </div>
    <div class="signature-header">
      <van-icon
        class="signature-arrow"
        name="arrow-left"
        size="24"
        @click="goBack"
      />
      <div class="signature-title">电子签名</div>
    </div>
  </div>
</template>

<script>
import vueSignature from "@/components/VueSignature";
import { uploadImg2 } from "@/api/upload";
import { supplementary } from "@/api/stores";

export default {
  name: "app",
  components: {
    vueSignature,
  },
  data() {
    return {
      title: "",
      option: {
        penColor: "rgb(0, 0, 0)",
        backgroundColor: "#fff",
      },
      disabled: false,
      isHandIn: true,
      dataUrl: "",
    };
  },
  mounted() {
    window.addEventListener("resize", this.renderResize, false);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.renderResize, false);
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    goRegister() {
      this.isHandIn = false;
    },
    submit() {
      if (this.isHandIn) return;
      this.disabled = true;
      this.isHandIn = true;
      let png = this.$refs.signature.save();
      let newPng = png.replace("data:image/png;base64,", "");
      this.$store.commit("setComplete", 1);
      uploadImg2(newPng).then((res) => {
        if (res.code == 200) {
          const { link } = res.data;
          this.$store.commit("setSignature", link);
          this.$toast({
            type: "loading",
            message: "正在提交...",
            forbidClick: true,
            duration: 0,
          });
          supplementary(this.$store.state)
            .then((result) => {
              this.$store.commit("setComplete", 0);
              if (result.code == 200) {
                this.clear();
                this.$router.replace({
                  path: "/success",
                });
                this.$toast.clear();
              }
              if (result.code == 401) {
                this.$toast({
                  type: "fail",
                  message: result.message,
                  forbidClick: true,
                  duration: 2000,
                });
              } else {
                this.$toast({
                  type: "fail",
                  message: result.msg,
                  forbidClick: true,
                  duration: 2000,
                });
              }
              this.disabled = false;
              this.isHandIn = false;
            })
            .catch((err) => {
              this.$store.commit("setComplete", 0);
              this.$toast({
                type: "fail",
                message: err,
                forbidClick: true,
                duration: 2000,
              });
              this.disabled = false;
              this.isHandIn = false;
            });
        }
      });
    },
    clear() {
      var _this = this;
      this.isHandIn = true;
      _this.$refs.signature.clear();
    },
  },
};
</script>

<style lang="less" scoped>
.app {
  width: 100vw;
  height: 100vh;
}

.signature {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

@media all and (orientation: portrait) {
  .signature-btns {
    position: fixed;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 0px;

    // .signature-btn-center {
    //   display: flex;
    //   flex-direction: column;
    // }
    .signature-btns-item {
      width: 200px;
      height: 70px;
      background: #ffb72f;
      border-radius: 35px;
      margin: 150px 0;
      transform: rotate(90deg);
      -ms-transform: rotate(90deg); /* Internet Explorer 9*/
      -moz-transform: rotate(90deg); /* Firefox */
      -webkit-transform: rotate(90deg); /* Safari 和 Chrome */
      -o-transform: rotate(90deg); /* Opera */
      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
    }
    .clear-item {
      background: #fff;
      color: #ffb72f;
      border-color: #ffb72f;
    }
  }
  .signature-header {
    height: 50vh;
    position: fixed;
    right: 0;
    padding: 60px 5px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .signature-title,
    .signature-arrow {
      font-size: 31px;
      transform: rotate(90deg);
      -ms-transform: rotate(90deg); /* Internet Explorer 9*/
      -moz-transform: rotate(90deg); /* Firefox */
      -webkit-transform: rotate(90deg); /* Safari 和 Chrome */
      -o-transform: rotate(90deg); /* Opera */
      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
    }
  }
}
@media all and (orientation: landscape) {
  .signature-btns {
    position: fixed;
    bottom: 0;
    width: 100vw;
    display: flex;
    justify-content: center;
    .signature-btns-item {
      margin: 0px 50px 20px;
      width: 130px;
      height: 42px;
      background: #ffb72f;
      border-radius: 21px;
      font-size: 16px;
    }
    .clear-item {
      background: #fff;
      color: #ffb72f;
      border: 1px solid #ffb72f;
    }
  }
  .signature-header {
    position: fixed;
    top: 0;
    width: 100vw;
    display: flex;
    justify-content: space-between;
    padding: 15px;
    .signature-title,
    .signature-arrow {
      font-size: 20px;
    }
  }
}
</style>
